<template>
	<div class="classify">
		<Header :active="searchActive" @changeActive="changeSearchActive"/>
		<div class="classify-main">
			<Menu :menuList="menuList" @changeMenu="changeMenu"/>
			<div class="classify-right">
				<Swipe :swipeList="swipeList" key="classify-swipe"/>
				<List :showList="showList"/>
			</div>
			<Search v-show="searchActive"/>
		</div>
	</div>
</template>

<script>
	import Classify from '../services/classify';
	import Header from "#/Classify/Header";
	import Menu from "#/Classify/Menu";
	import Swipe from "#/Public/Swipe";
	import List from '#/Classify/List';
	import Search from '#/Classify/Search';

	const _classify = new Classify();
	export default {
		name: "Classify",
		created() {
			this.getClassifyData();
		},
		data() {
			return {
				classifyList: [],
				activeId: 0,
				swipeList: [
					{
						linkUrl: '/classify',
						picUrl: require('@/assets/img/banner1.jpg')
					},
					{
						linkUrl: '/classify',
						picUrl: require('@/assets/img/banner2.jpg')
					}
				],
				searchActive: false,
				transitionShow: false
			}
		},
		computed: {
			menuList() {
				return this.classifyList.filter(item => item.level === 1);
			},
			showList() {
				if (this.activeId === 0) {
					return this.classifyList.filter(item => item.level === 2);
				} else {
					return this.classifyList.filter(item => item.pid === this.activeId);
				}
			}
		},
		methods: {
			changeMenu(id) {
				this.activeId = id;
			},
			changeSearchActive(state) {
				this.searchActive = state;
			},
			getClassifyData() {
				_classify.getClassifyData().then(res => {
					this.classifyList = res.data;
				})
			}
		},
		components: {
			Header,
			Menu,
			Swipe,
			List,
			Search,
		}
	}
</script>
